<template>
  <van-popup
    v-model="isShow"
    position="bottom"
  >
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :options="options"
      @close="isShow = false"
      @change="onChange"
      @finish="onFinish"
      :field-names="fieldNames"
    />
    <!-- <van-cascader
      v-model="cascaderValue"
      :title="title"
      :options="options"
      :field-names="fieldNames"
      @close="close"
      @finish="onFinish"
      @change="changeArea"
    /> -->
  </van-popup>
</template>

<script>
import { Cascader, Popup } from "vant";
import utilTool from "@/common/utils/utils";
import apiArea from "@/common/api/apiArea";
export default {
  name: "AreaPopupCascader",
  components: {
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    provinceCode: {
      type: String,
      default: "",
    },
    cityCode: {
      type: String,
      default: "",
    },
    districtCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: false,
      fieldValue: "",
      cascaderValue: "",
      fieldNames: {
        text: "areaName",
        value: "id",
        areaCode: "areaCode",
        children: "children",
      },
      options: [],
    };
  },
  watch: {
    show: function (val) {
      this.isShow = val;
    },
    districtCode: function (val) {
      this.cascaderValue = val;
      this.echoArea();
    },
  },
  created() {
    this.getProvinceInfo();
    this.isShow = this.show;
    this.cascaderValue = this.districtCode;
  },
  methods: {
    // 获取省列表
    async getProvinceInfo() {
      let res = await apiArea.getAreaInfo({ parentId: 0 });
      let tempList = this.setItems(res.data, true);
      this.options = tempList;
      if (this.cascaderValue) {
        this.echoArea();
      }
    },
    //  设置行政区码显示
    setItems(list, isItem) {
      let tempArr = [];
      for (let index in list) {
        let item = {
          areaName: list[index].areaName,
          areaCode: list[index].areaCode,
          id: list[index].id,
        };
        if (isItem) {
          item = {
            areaName: list[index].areaName,
            areaCode: list[index].areaCode,
            id: list[index].id,
            children: [],
          };
        }
        tempArr.push(item);
      }
      return tempArr;
    },
    // 切换行政区域
    async onChange(value) {
      let selectedOptions = value.selectedOptions;
      let id = value.value;
      let provinceId = selectedOptions[0].id;
      let options = this.options;
      let provinceIndex = options.findIndex((item) => {
        return item.id == provinceId;
      });
      let cityList = [];
      if (value.tabIndex === 0) {
        let res = await apiArea.getAreaInfo({ parentId: id });
        cityList = this.setItems(res.data, true);
        options[provinceIndex].children = cityList;
      }
      let countyList = [];
      if (value.tabIndex === 1) {
        let res = await apiArea.getAreaInfo({ parentId: id });
        cityList = options[provinceIndex].children;
        countyList = this.setItems(res.data);
        let cityIndex = cityList.findIndex((item) => {
          return item.id == id;
        });
        cityList[cityIndex].children = countyList;
      }
      this.options = options;
    },
    async echoArea() {
      let options = this.options;

      let provinceIndex = options.findIndex((item) => {
        return item.areaCode == this.provinceCode;
      });
      let provinceInfo = options[provinceIndex];

      let cityRes = await apiArea.getAreaInfo({
        parentId: provinceInfo.id,
      });
      let cityList = cityRes.data;
      provinceInfo.children = cityList;
      let cityIndex = cityList.findIndex((item) => {
        return item.areaCode == this.cityCode;
      });
      let cityInfo = cityList[cityIndex];

      let countyRes = await apiArea.getAreaInfo({
        parentId: cityInfo.id,
      });

      let countyList = countyRes.data;
      let coutntyIndex = countyList.findIndex((item) => {
        return item.areaCode == this.districtCode;
      });
      let countyInfo = countyList[coutntyIndex];
      
      this.$set(cityInfo, "children", countyList);

      options[provinceIndex]=provinceInfo
      let fieldValue =
        provinceInfo.areaName +
        "/" +
        cityInfo.areaName +
        "/" +
        countyInfo.areaName;
        let  districtCN =
        provinceInfo.areaName +
        " " +
        cityInfo.areaName +
        " " +
        countyInfo.areaName;
      let selectedOptions = [];
      selectedOptions.push(provinceInfo);
      selectedOptions.push(cityInfo);
      selectedOptions.push(countyInfo);
      let tempInfo = {
        districtCN:districtCN,
        fieldValue: fieldValue,
        selectedOptions: selectedOptions,
      };
      this.cascaderValue = countyInfo.id;
      this.options = options;
      this.$emit("setSelectArea", tempInfo);
    },
    showArea() {
      this.isShow = true;
    },
    hideArea() {
      this.isShow = false;
    },
    close() {
      this.isShow = false;
    },
    onConfirm(e) {
      this.hideArea();
      this.$emit("setAreaCode", e);
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.hideArea();
      this.fieldValue = selectedOptions
        .map((option) => option.areaName)
        .join("/");
      let districtCN= selectedOptions
        .map((option) => option.areaName)
        .join(" ");
      let tempInfo = {
        fieldValue: this.fieldValue,
        selectedOptions: selectedOptions,
        districtCN:districtCN
      };
      this.$emit("setSelectArea", tempInfo);
    },
  },
};
</script>

<style scoped lang="less">
.not-address-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.position-bottom-img {
  width: 100%;
  height: 5px;
}

.van-cell.van-cell--clickable {
  padding: 38px 24px;
  border-radius: 16px;
}

.van-cell__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
  }

  .custom-title {
    font-size: 34px;
    font-weight: 500;
    color: #222222;
  }
}
</style>
